/**
 * Created by tdzl2003 on 10/14/16.
 */
import React, {PropTypes} from 'react';
import {
  Editor,
  EditorState,
  RichUtils,
  getDefaultKeyBinding,
} from 'draft-js';
import classnames from 'classnames';

import styles from './RichEdit.less';

import ActionList from './ActionList';
import {getBlockStyle} from './align';
import handleKeyCommand from './handleKeyCommand';
import decorator from './decorator';

export default class RichEdit extends React.Component {
  state = {
    editorState: EditorState.createEmpty(decorator),
    recentlyFocus: false,
    modal: null,
  };
  onChange = (editorState) => this.setState({editorState});
  handleKeyCommand = (command) => {
    const newState = handleKeyCommand(this.state.editorState, command);
    if (newState) {
      if (newState === true) {
        // Handled without modify editor state.
        return;
      }
      this.onChange(newState);
      return true;
    }
  };
  keyBinding = e => {
    return getDefaultKeyBinding(e);
  };
  renderButtons() {
    return renderButtons(this);
  }
  getEditorState() {
    return this.state.editorState;
  }
  setEditorState(editorState, cb) {
    this.setState({editorState}, cb);
  }
  componentDidMount(){
    const {autoFocus} = this.props;
    if (autoFocus){
      this.focus();
    }
  }
  focus = () => {
    this.refs.editor.focus();
  };
  onFocus = () => {
    if (this.recentlyFocusTimer != null) {
      clearTimeout(this.recentlyFocusTimer);
    }
    if (!this.state.recentlyFocus) {
      this.setState({
        recentlyFocus: true,
      });
    }
  }
  onBlur = () => {
    if (this.recentlyFocusTimer != null) {
      clearTimeout(this.recentlyFocusTimer);
    }
    this.recentlyFocusTimer = setTimeout(() => {
      this.setState({
        recentlyFocus: false,
      });
    }, 16);
  };
  onTab = ev => {
    const {editorState} = this.state;
    const newState = RichUtils.onTab(ev, editorState, 4);
    if (newState && newState !== editorState) {
      this.onChange(newState);
      return true;
    }
  };
  showDialog = dialog => {
    const ret = new Promise((resolve, reject)=> {
      this.setState({
        modal: dialog,
        modalVisible: true,
      });
    });
    ret.then(()=>this.setState({
      modalVisible: false,
    }));
    return ret;
  };
  render() {
    const {editorState, recentlyFocus, modal:ModalClass, modalVisible} = this.state;
    const selectionState = editorState.getSelection();

    return(
      <div className={styles.container}>
        <ActionList editor={this} />
        <div
          className={classnames([styles.editor, recentlyFocus && styles.editorFocus])}
        >
          <Editor
            ref="editor"
            onChange={this.onChange}
            keyBindingFn={this.keyBinding}
            blockStyleFn={getBlockStyle}
            editorState={editorState}
            handleKeyCommand={this.handleKeyCommand}
            onFocus={this.onFocus}
            onBlur={this.onBlur}
            onTab={this.onTab}
          />
        </div>
        {ModalClass && <ModalClass editor={this} visible={modalVisible}/>}
      </div>
    )
  }
}